<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    title="查看"
    size="71%"
    :visible.sync="visibility"
    custom-class="demo-drawer"
  >
    <div class="demo-drawer__content">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="120px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="来源单号">
              <el-input v-model="temp.sourceOrderCode" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划分装日期">
              <el-date-picker
                v-model="temp.expectManufactureDate"
                :disabled="disabled"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标签">
              <el-select v-model="temp.tag" :disabled="disabled">
                <el-option
                  v-for="item in tagOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="领料仓库">
              <el-select v-model="temp.fromWarehouseId" :disabled="disabled">
                <el-option
                  v-for="item in warehouseOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库仓库">
              <el-select v-model="temp.toWarehouseId" :disabled="disabled">
                <el-option
                  v-for="item in warehouseOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="temp.orderType === 1" label="复溶情况">
              <el-radio-group
                v-model="temp.reconstitutionStatus"
                :disabled="disabled"
              >
                <el-radio :label="0">不复溶</el-radio>
                <el-radio :label="1">通知复溶</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="temp.orderType === 2" :span="8">
            <el-form-item label="生产项目">
              <el-input v-model="temp.project" :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-table
                :data="editableTabs"
                @selection-change="handleSelectionChange"
              >
                <!-- <el-table-column   align="center"
              type="selection"
              width="55"
              :selectable="checkSelectable"
            /> -->
                <el-table-column align="center" type="expand">
                  <template slot-scope="{ row }">
                    <el-row>
                      <el-form inline class="demo-table-expand">
                        <el-col :span="24">
                          <!-- 设备 -->
                          <el-form-item
                            v-if="
                              row.equipmentList && row.equipmentList.length > 0
                            "
                            label="设备"
                          >
                            <el-table
                              :data="row.equipmentList"
                              highlight-current-row
                              border
                            >
                              <el-table-column
                                align="center"
                                label="设备编号"
                                prop="equipmentCode"
                                width="200"
                              />
                              <el-table-column
                                align="center"
                                label="设备名称"
                                prop="equipmentName"
                                width="200"
                              />

                              <el-table-column
                                align="center"
                                label="规格"
                                prop="specification"
                                width="200"
                              />

                              <el-table-column
                                align="center"
                                label="有效期"
                                prop="expirationDate"
                                width="200"
                              />
                              <el-table-column
                                align="center"
                                label="使用模式"
                                width="200"
                              >
                                <template slot-scope="scope">
                                  <el-radio-group
                                    v-model="scope.row.usage"
                                    @click.native="
                                      pushRadio(scope.row.usage, scope.$index)
                                    "
                                  >
                                    <el-radio
                                      disabled
                                      :label="1"
                                    >独占</el-radio>
                                    <el-radio
                                      disabled
                                      :label="0"
                                    >共享</el-radio>
                                  </el-radio-group>
                                </template>
                              </el-table-column>
                            </el-table>
                          </el-form-item>
                        </el-col>
                        <el-col :span="24">
                          <el-form-item
                            v-if="
                              row.orderType === 1 &&
                                row.goodsList &&
                                row.goodsList.length
                            "
                            style="width: 90%"
                            label="物料"
                          >
                            <el-table
                              :data="row.goodsList"
                              highlight-current-row
                              border
                              align="center"
                              style="width:90%"
                            >
                              <el-table-column
                                align="center"
                                label="状态"
                                width="100px"
                                fixed
                              >
                                <template
                                  slot-scope="{ row }"
                                ><el-tag v-if="row.type === 2">分装前</el-tag>
                                  <el-tag
                                    v-else
                                    type="success"
                                  >分装后</el-tag></template>
                              </el-table-column>
                              <el-table-column
                                align="center"
                                label="货号"
                                prop="goodsCode"
                                width="150px"
                                fixed
                              />
                              <el-table-column
                                align="center"
                                label="货品简称"
                                prop="goodsAbbr"
                                width="120px"
                                fixed
                              />
                              <el-table-column
                                align="center"
                                label="批号"
                                prop="goodsBatchCode"
                                width="150px"
                                fixed
                              />
                              <el-table-column
                                align="center"
                                label="浓度"
                                width="100px"
                              >
                                <template slot-scope="{ row }">
                                  {{ row.concentration }}
                                  {{ row.concentrationUnit }}
                                </template>
                              </el-table-column>
                              <el-table-column
                                align="center"
                                label="规格"
                                width="100px"
                              >
                                <template slot-scope="{ row, $index }">
                                  <span>{{ row.specification }}/{{
                                    row.unit
                                  }}</span>
                                </template>
                              </el-table-column>
                              <el-table-column
                                align="center"
                                label="计划个数"
                                width="80px"
                                prop="expectCount"
                              />
                              <el-table-column
                                align="center"
                                label="计划数量"
                                width="80px"
                                prop="expectQuantity"
                              />
                              <el-table-column
                                align="center"
                                label="实际个数"
                                width="80px"
                                prop="factCount"
                              />
                              <el-table-column
                                align="center"
                                label="实际数量"
                                width="80px"
                                prop="factQuantity"
                              />
                              <el-table-column
                                align="center"
                                label="损耗"
                                prop="attritionRate"
                                width="80px"
                              />
                            </el-table>
                          </el-form-item>
                          <!-- 生产 -->
                        </el-col>
                        <el-col :span="24">
                          <el-form-item
                            v-if="
                              row.orderType === 2 &&
                                row.goodsList &&
                                row.goodsList.length
                            "
                            style="width: 90%"
                            label="项目"
                          >
                            <el-table
                              :data="row.goodsList"
                              highlight-current-row
                              border
                            >
                              <el-table-column
                                align="center"
                                label="状态"
                                width="100px"
                                fixed
                              >
                                <template
                                  slot-scope="{ row }"
                                ><el-tag v-if="row.type === 1">项目</el-tag>
                                  <el-tag
                                    v-else
                                    type="success"
                                  >物料</el-tag></template>
                              </el-table-column>
                              <el-table-column
                                align="center"
                                label="货品简称"
                                prop="goodsAbbr"
                                width="140"
                              />

                              <el-table-column
                                align="center"
                                label="货号"
                                prop="goodsCode"
                                width="150"
                              />
                              <el-table-column
                                align="center"
                                label="批号"
                                width="150"
                                prop="goodsBatchCode"
                              />
                              <el-table-column
                                align="center"
                                label="单位"
                                width="100"
                                prop="unit"
                              />
                              <el-table-column
                                align="center"
                                label="计划数量"
                                prop="expectQuantity"
                              />
                              <el-table-column
                                align="center"
                                label="实际数量"
                                prop="factQuantity"
                              />
                              <el-table-column
                                align="center"
                                label="规格"
                                width="100"
                                prop="specification"
                              />
                              <el-table-column
                                align="center"
                                label="浓度"
                                width="100"
                                prop="factCount"
                              />
                            </el-table>
                          </el-form-item>
                        </el-col>
                        <el-col :span="24">
                          <!-- 记录 -->
                          <el-form-item
                            v-if="row.recordTemplateGroupList"
                            style="width: 90%"
                          >
                            <el-card
                              v-for="(
                                group, index
                              ) in row.recordTemplateGroupList"
                              id="el-test"
                              :key="group.recordTemplateGroupId"
                            >
                              <div slot="header" class="clearfix">
                                <span>{{ group.recordTemplateGroupName }}</span>
                              </div>

                              <div
                                v-if="group.itemList"
                                class="record-template"
                              >
                                <div>
                                  <el-row
                                    v-for="item in group.itemList"
                                    :key="item.recordTemplateItemId"
                                    class="recordRow"
                                  >
                                    <el-col :span="2">
                                      {{ item.sequence }}
                                    </el-col>
                                    <el-col
                                      :span="21"
                                      v-html="
                                        item.content,
                                      "
                                    />
                                  </el-row>
                                </div>
                              </div>
                            </el-card>
                          </el-form-item>
                        </el-col>
                      </el-form>
                    </el-row>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="任务单号"
                  prop="manufactureTaskCode"
                />
                <el-table-column align="center" label="任务状态" prop="status">
                  <template slot-scope="{ row }">
                    {{ formatByKeyValue(statusOptions, row.status) }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="操作人"
                  prop="manufactureUserName"
                />
                <el-table-column
                  align="center"
                  label="更新时间"
                  prop="updateTime"
                />
                <!-- <el-table-column   align="center" label="交付方式" prop="updateTime">
              <template scope="{row}">
                <el-select
                  v-model="row.handOverResult"
                  :disabled="row.status !== 40"
                  placeholder="请选择"
                  @change="saveResult(row)"
                >
                  <el-option
                    v-for="item in resultListOptions"
                    :key="item.label"
                    :label="item.value"
                    :value="item.key"
                  />
                </el-select>
              </template>
            </el-table-column   align="center"> -->
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button @click="handleClose">关闭</el-button>
          <!-- <el-select
            v-if="multipleSelection.length > 0"
            v-model="handOverResult"
            placeholder="请选择"
          >
            <el-option
              v-for="item in resultListOptions"
              :key="item.value"
              :label="item.value"
              :value="item.key"
            />
          </el-select> -->
          <!-- <el-button
            v-if="multipleSelection.length > 0"
            type="primary"
            @click="saveResultList"
          >交付</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { getTaskList } from '@/api/mes/manufactureTask.js'
import { parseToHtml } from '../../template/scripts/base'
import { parseTextToHtml } from '../../template/scripts/text'
import { parseOptionToHtml } from '../../template/scripts/option'
import { parseFillToHtml } from '../../template/scripts/fill'
import { parseTableToHtml } from '../../template/scripts/table'
import { parseImageToHtml } from '../../template/scripts/image'
import { formatByKeyValue } from '@/utils'
import {
  resultListPreOptions,
  saveResultOrder
} from '@/api/mes/manufactureResult.js'
import UglyMap from '@/utils/uglyMap'

export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    currentRow: {
      type: Object,
      default: null
    },
    statusOptions: {
      type: Array,
      default: null
    },
    warehouseOptions: {
      type: Array,
      default: null
    },
    tagOptions: {
      type: Array,
      default: null
    },
    unitOptions: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      panels: ['equipment', 'goods', 'record'],
      loading: false,
      temp: {
        sourceOrderCode: null,
        orderType: null,
        tag: null,
        fromWarehouseId: null,
        toWarehouseId: null,
        expectManufactureDate: null,
        reconstitutionStatus: 0,
        memo: null
      },

      rules: {
        //
      },
      searchGoodsDialogVisible: false,
      disabled: true,
      title: '',
      currentStatus: true,
      editableTabsValue: '',
      selectedManufactureTask: 1,
      goodeDataList: null,
      equipmentList: null,
      recordDialogVisible: true,
      editableTabs: [],
      recordMap: null,
      resultListOptions: [],
      handOverResult: 1,
      multipleSelection: []
    }
  },
  computed: {
    visibility: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(value) {
      if (value && this.currentRow) {
        this.$nextTick(() => {
          this.temp = this.currentRow
          this.handleManufactureTaskChang(this.temp)
        })
      }
    }
  },
  mounted() {
    this.recordMap = new UglyMap()
    // resultListPreOptions().then((res) => {
    //   this.resultListOptions = res.data.handOverResult
    // })
  },
  methods: {
    formatByKeyValue,
    handleClose() {
      this.visibility = false
    },
    renderHtml(template, recordTemplateItemId) {
      const record = this.recordMap.get(recordTemplateItemId)
      const html = parseToHtml(
        template,
        record,
        [
          parseTextToHtml,
          parseOptionToHtml,
          parseFillToHtml,
          parseTableToHtml,
          parseImageToHtml
        ],
        recordTemplateItemId,
        this.currentStatus
      )
      return html
    },
    async handleManufactureTaskChang(row) {
      const { data } = await getTaskList({
        manufactureOrderId: row.manufactureOrderId,
        withEquipmentFlag: true,
        withGoodsFlag: true,
        withRecordFlag: true
      })
      if (data) {
        data.forEach((e) => {
          const data2 = e.recordList || []
          if (data2 && data2.length > 0) {
            data2.forEach((e) => {
              this.recordMap.put(e.recordTemplateItemId, JSON.parse(e.content))
            })
          }
          // e.handOverResult = 1
          if (
            e.recordTemplateGroupList &&
            e.recordTemplateGroupList.length > 0
          ) {
            e.recordTemplateGroupList.forEach((groupList) => {
              groupList.itemList.forEach((item) => {
                item.content = this.renderHtml(
                  item.content,
                  item.recordTemplateItemId
                )
              })
            })
          }
        })
      }

      this.editableTabs = data
      this.temp = row
      console.log(this.temp, ' this.temp')
    },
    handleClick(row) {},
    handleSelectionChange(val) {
      const data = []
      val.forEach((e) => {
        data.push({
          manufactureTaskId: e.manufactureTaskId,
          handOverResult: this.handOverResult
        })
      })
      this.multipleSelection = data
    },
    saveResult(row) {
      const data = {
        manufactureResultGoodsList: [
          {
            manufactureTaskId: row.manufactureTaskId,
            handOverResult: row.handOverResult
          }
        ],
        memo: ''
      }
      saveResultOrder(data).then((res) => {
        this.handleManufactureTaskChang(this.temp)
      })
    },
    saveResultList() {
      const data = {
        manufactureResultGoodsList: this.multipleSelection,
        memo: ''
      }
      saveResultOrder(data).then((res) => {
        this.handleManufactureTaskChang(this.temp)
      })
    },
    checkSelectable(row) {
      if (row.handOverResult) {
        return false
      } else if (row.status !== 40) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss">
</style>
